<script setup lang="ts">
import useDragramStore from '@/pages/table-diagraming/store/useDragramStore'
const dragramStore = useDragramStore()
const { optionTrigger, selectFormItem, modalPosition } = storeToRefs(dragramStore)
const modalRef = ref(null)
onClickOutside(modalRef, () => {
  optionTrigger.value = false
})
</script>

<template>
  <transition name="el-fade-in">
    <div
      v-show="optionTrigger"
      ref="modalRef"
      :style="{ top: modalPosition.y + 'px', left: modalPosition.x + 'px' }"
      class="search-modal"
      :title="`【${selectFormItem?.name}】属性设置`"
    >
      <el-form v-if="selectFormItem" :model="selectFormItem" label-width="100px">
        <el-form-item label="接口检索key" prop="modelKey">
          <el-input
            v-model="selectFormItem.modelKey"
            placeholder="queryParams.key"
            clearable
            class="!w-[200px]"
          ></el-input>
        </el-form-item>
        <el-form-item label="占位文本" prop="placeholder">
          <el-input
            v-model="selectFormItem.placeholder"
            placeholder="placeholder"
            clearable
            class="!w-[200px]"
          ></el-input>
        </el-form-item>

        <template v-if="selectFormItem.type === 'select'">
          <el-form-item label="数据源" prop="options">
            <el-input
              v-model="selectFormItem.options"
              placeholder="options"
              clearable
              class="!w-[200px]"
            ></el-input>
          </el-form-item>
        </template>

        <template v-if="selectFormItem.type === 'date'">
          <el-form-item label="日历类型">
            <el-radio-group v-model="selectFormItem.dateType" class="!w-[200px]">
              <el-radio-button label="日期" value="date"></el-radio-button>
              <el-radio-button label="日期区间" value="daterange"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="日期格式" prop="dateFormat">
            <el-input
              v-model="selectFormItem.dateFormat"
              placeholder="日期格式(YYYY-MM-DD)"
              clearable
              class="!w-[200px]"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.search-modal {
  position: absolute;
  background-color: #fff;
  z-index: 99;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  border: 1px solid var(--el-card-border-color);
  padding: 10px 20px;
}
</style>
